<template>
    <div>
        <el-button type="primary" size="default" @click="emit('setState',1)" icon="ele-Plus" :disabled="!category3Id">添加SPU</el-button>
        
        <el-table border stripe :style="{margin:'20px 0'}" :data="tableData">
            <el-table-column type="index" width="50" label="序号"/>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{row,$index}">
                    <el-button type="primary" size="default" @click="emit('setState',2,row)" icon="ele-Plus" title="添加SKU"></el-button>
                    <el-button type="primary" size="default" @click="emit('setState',1,row)" icon="ele-Edit" title="修改SPU"></el-button>
                    <el-button type="info" size="default" @click="showDetail(row)" icon="ele-InfoFilled" title="查看SPU"></el-button>
                    <el-button type="danger" size="default" @click="deleteSpu(row)" icon="ele-Delete" title="删除SPU"></el-button>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination
        v-model:page-size="limit"
        v-model:current-page="page"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[3, 5, 7, 9]"
      />
    </div>
    <el-dialog v-model="dialogTableVisible" title="Sku列表">
    <el-table :data="skuList">
      <el-table-column property="date" label="名称" prop="skuName"/>
      <el-table-column property="name" label="价格" prop="price" />
      <el-table-column property="address" label="重量" prop="weight"/>
      <el-table-column property="address" label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" width="120" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
    
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { requestFindBySpuId, type SkuInfoListType } from '@/api/sku';

export default defineComponent({
    name:"SpuList"
})
</script>

<script lang="ts" setup>
import {ref, watch} from 'vue'
import useAttrStore from '@/stores/attr';
import { storeToRefs } from 'pinia';
//请求api
import {getDeleteSpuRequest, getSpuListRequest} from '@/api/spu'
import type {SpuInfoListType ,SpuInfoType} from '@/api/spu'

import { ElMessage } from 'element-plus';

const page = ref(1);
const limit = ref(3);
const total = ref(0);

//获取自定义事件
const emit =  defineEmits<{
    (event:'setState',state:number,row?:SpuInfoType) :void
}>()

//获取仓库实例
const attrStore = useAttrStore();

//解构出category3Id
const {category3Id} = storeToRefs(attrStore);

const tableData = ref<SpuInfoListType>([])

//1.封装spu分页请求列表
const getSpuList = async () => {
    try {
        //发送列表请求
        const re = await getSpuListRequest(page.value,limit.value,category3Id.value as number);
        //获取值之后赋值给tableData
        tableData.value = re.records;
        //获取总数量
        total.value = re.total
    } catch (error) {
        ElMessage.error("获取spu列表请求失败")
    }
}

//2.监听category3Id的变化
watch([category3Id,page,limit],() => {
    if(!category3Id.value) {
        //当重新请求的时候清空数据和total
        tableData.value = [];
        total.value = 0;
        return
    }
    getSpuList()
},{immediate:true})


//删除某个Spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await getDeleteSpuRequest(row.id as number);
    ElMessage.success("删除数据成功");
    //发送请求
    getSpuList();
  } catch (e) {
    ElMessage.error("删除数据失败");
  }
};

const dialogTableVisible = ref(false)

const skuList = ref<SkuInfoListType>([])

//查看sku列表
const showDetail = async (row:SpuInfoType) => {
    dialogTableVisible.value = true
    try{
        const re = await requestFindBySpuId(row.id as number);
        skuList.value = re
    }catch(e){
        ElMessage.error("查看Sku列表失败")
    }
    
}

</script>


<style scoped>

</style>